<template>
    <div>
        <h3>单价：￥ {{price}}</h3>
        <Num @getCount="getSelectCount"></Num>
        <div>
           总价是 : {{totalPrice}} 元
        </div>
        <button @click="addToShopCar" type="button" class="mui-btn mui-btn-danger mui-btn-outlined">加入购物车</button>
    </div>
</template>

<script>

import Num from '../Num/Num.vue'
export default{
    data(){
        return {
            price: 666.9,
            selectCount: 1,
            id: '001'
        }
    },
    components: {
        Num,
    },
    methods: {
        getSelectCount(count){
            this.selectCount = count;
        },
        addToShopCar () { // 点击加入购物车 就要把商品的价格 数量 id  状态  全部添加到vuex的state中

            // 拼接到state中car数组中存储起来
            var goodsInfo = {count: this.selectCount,price: this.price,id: this.id,selected: true};

            // 调用 mutations中的方法
            this.$store.commit('addToCar',goodsInfo);
        }
    },
    computed: {
        totalPrice(){
            return (this.selectCount*this.price).toFixed(2);
        }
    }
}
</script>